import { Head, Image } from "mdx-deck";
import { Invert, Split } from "mdx-deck/layouts";

import { BasicUsageResult, BasicScenario } from "./components/Examples";

<Head>
  <title>GitGraph.js</title>
  <meta name="twitter:card" content="https://gitgraphjs.com" />
  <meta name="twitter:site" content="@nicoespeon" />
  <meta name="twitter:title" content="GitGraph.js" />
  <meta
    name="twitter:description"
    content="A JavaScript library to draw pretty git graphs."
  />
  <meta name="twitter:image" content="https://gitgraphjs.com/assets/gitgraph-logo.png" />
  <meta name="og:image" content="https://gitgraphjs.com/assets/gitgraph-logo.png" />
  <link rel="shortcut icon" type="image/png" href="./assets/favicon.png" />
</Head>
<h1 className="sr-only">GitGraph.js</h1>

export { default as theme } from "./theme";

![](./assets/gitgraph-logo.png)

## A JavaScript library<br />to draw pretty git graphs.

<small>Use ⬅️ and ➡️ keys to navigate</small>

---

## Why this library? 🤔

- To draw git graphs examples that are <u>easy to maintain</u>
- For presentations, blog posts…
- … or any use case that implies to render a git graph!

---

## 📦 Install GitGraph.js

- For JS (<small>[README][js-readme]</small>): `npm i @gitgraph/js`
- For React (<small>[README][react-readme]</small>): `npm i @gitgraph/react`

[js-readme]: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-js#gitgraphjs
[react-readme]: https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-react#gitgraphreact

---

### Importing the JS library

```html
<!-- Somewhere in the DOM -->
<div id="gitgraph"></div>
```

```js
import { createGitgraph } from "@gitgraph/js";

const graphContainer = document.getElementById("gitgraph");
const gitgraph = createGitgraph(graphContainer);
```

---

### Importing the React library

```jsx
import { Gitgraph } from "@gitgraph/react";

// Now you can use the component =>
<Gitgraph>{(gitgraph) => {}}</Gitgraph>;
```

---

import { BasicUsage } from "./components/CodeOverview";

<BasicUsage title="👾 Start using `gitgraph`" />

---

export default Split;

<BasicUsageResult />

## The result

👈 👏 🎉

---

export default Invert;

## Advanced usage

---

You can customize the graph with `options`

```jsx
// @gitgraph/js − Pass `options` as second param
const gitgraph = createGitgraph(graphContainer, options);
```

```jsx
// @gitgraph/react − Provide `options` as props
<Gitgraph options={options}>{(gitgraph) => {}}</Gitgraph>
```

---

export default Split;

<BasicScenario />

### `options.orientation`

Default is vertical

---

export default Split;

<BasicScenario options={{ orientation: "vertical-reverse" }} />

### `options.orientation`

With `"vertical-reverse"`

---

### `options.orientation`

With `"horizontal"`

<BasicScenario options={{ orientation: "horizontal" }} />

You also have `"horizontal-reverse"`

---

export default Split;

<BasicScenario />

### `options.template`

Default is `"metro"`

---

export default Split;

<BasicScenario templateName="blackarrow" />

### `options.template`

With `"blackarrow"`

---

### `options.template`

You can create your own with `templateExtend()`:

```jsx
const options = {
  template: templateExtend("metro", {
    colors: ["red", "blue", "orange"],
    // …
  }),
};
```

---

export default Split;

<BasicScenario options={{ mode: "compact" }} />

### `options.mode`

You can opt-in `"compact"`

It renders commit messages in tooltips

---

## Create branch with `options`

```jsx
gitgraph.branch({
  name: "develop",
  style: {
    // Specific style for this branch
  },
});
```

---

## Create commit with `options`

```jsx
master.commit({
  subject: "Add feature",
  body: "More details about the feature…",
  dotText: "❤️",
  tag: "v1.2",
  style: {
    // Specific style for this commit
  },
});
```

---

## Merge branch with `options`

```jsx
master.merge({
  branch: develop,
  fastForward: true,
  commitOptions: {
    // Every valid `options` for a commit
  },
});
```

---

## Add event listeners on commits

```jsx
master.commit({
  subject: "Add tests",
  onMessageClick(commit) {
    alert(`Commit ${commit.hash} selected`);
  },
});
```

But also: `onMouseOver`, `onMouseOut`, etc.

---

## Check detailed use-cases 🧐

- [JS stories][js-stories] of `@gitgraph/js`
- [React stories][react-stories] of `@gitgraph/react`

[js-stories]: ./stories?path=/story/gitgraph-js-1-basic-usage--default
[react-stories]: ./stories?path=/story/gitgraph-react-1-basic-usage--default

---

## Thank you 🤗

To our contributors:

<p className="sr-only">List of contributors images</p>

[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/0)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/0)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/1)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/1)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/2)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/2)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/3)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/3)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/4)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/4)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/5)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/5)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/6)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/6)
[![](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/images/7)](https://sourcerer.io/fame/nicoespeon/nicoespeon/gitgraph.js/links/7)

[![Chromatic QA](https://cdn-images-1.medium.com/letterbox/147/36/50/50/1*oHHjTjInDOBxIuYHDY2gFA.png?source=logoAvatar-d7276495b101---37816ec27d7a)](https://www.chromaticqa.com/) for helping catching visual regressions.

---

## Do you like George Michael? 🎷

<iframe
  width="784"
  height="441"
  src="https://www.youtube-nocookie.com/embed/GaoLU6zKaws"
  frameBorder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>
